<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">IP资源管理</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            style="margin-left: 10px"
            label-position="left"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input style="width: 400px" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="需求单位" prop="demand_unit">
                <el-cascader
                    :props="{ value: 'id', checkStrictly: true }"
                    :show-all-levels="false"
                    v-model="form.demand_unit"
                    @change="demandUnitChange"
                    placeholder="请选择，可搜索"
                    :options="dept"
                    clearable
                    filterable
                ></el-cascader>
            </el-form-item>
            <el-form-item label="云服务商:" prop="cloudSupplier">
                <el-select
                    v-model="cloudSupplier"
                    style="width: 200px"
                    placeholder="请选择云服务商"
                    @change="getAllcloudUpList"
                >
                    <el-option
                        v-for="item in logicListALL"
                        :key="item.roleKey"
                        :label="item.cloudSupplierName"
                        :value="item.roleKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="单位审核" prop="unit_audit">
                        <el-radio-group
                            @change="UnitAuditChange"
                            v-model="form.unit_audit"
                        >
                            <el-radio label="true">是</el-radio>
                            <el-radio label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        v-if="IsUnitAudit"
                        label="审核单位"
                        prop="Auditunit"
                    >
                        <el-cascader
                            :props="{ value: 'id', checkStrictly: true }"
                            :show-all-levels="false"
                            @change="auditUnitChange"
                            v-model="form.audit_unit"
                            placeholder="请选择，可搜索"
                            :options="dept"
                            clearable
                            filterable
                        ></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="Subhead">需求信息</div>
        <div class="tabletitle">
            IP资源申请明细
            <!-- <Button>
                添加
            </Button> -->
            <img style="width: 20px;cursor: pointer;vertical-align: middle;" @click="add()" src="../../../assets/icons/add.png" alt="">
        </div>
        <Table :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="applicationSystem">
                <el-select clearable filterable v-model="data[index].applicationSystem">
                    <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                    </el-option>
                </el-select>
            </template>

            <template slot-scope="{ row, index }" slot="IpType">
                <el-select clearable filterable style="width: 200px" v-model="data[index].IpType">
                    <el-option v-for="item in IpTypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot-scope="{ row, index }" slot="PortManage">
                <el-select clearable filterable style="width: 200px" v-model="data[index].PortManage">
                    <el-option v-for="item in TypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>

            <template slot-scope="{ row, index }" slot="port">
                <Input
                    type="text"
                    v-model="data[index].port"
                />
            </template>
            <template slot-scope="{ row, index }" slot="portType">
                <el-select clearable filterable style="width: 200px" v-model="data[index].portType">
                    <el-option v-for="item in portTypeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot-scope="{ row, index }" slot="remarks">
                <Input
                    type="text"
                    v-model="data[index].remarks"
                />
            </template>

            <template slot-scope="{ row, index }" slot="action">
                <Button type="error" @click="remove(index)">删除</Button>
            </template>
        </Table>
        <div style="text-align: center;margin-top: 20px;margin-bottom: 20px;">
            <el-button type="success" @click="sumit">
                提交工单
            </el-button>
        </div>
    </div>
</template>
<script>
import { treeselect } from "@/api/system/dept";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js"
import { logicList } from "@/api/basic/services";
export default {
    name: "IPResourceManager",
    data() {
      var validator = (rule, value, callback,key1,key2,key3,msg) => {
        if (!this.cloudSupplier) {
          callback(new Error('请选择云服务商'));
        } else{
          callback();
        }
      };
        return {
          logicListALL: [],
            form: {
                title: "",
                demand_unit: null,
                unit_audit: 'false',
                audit_unit: null,
                ipList:[]
            },
            cloudSupplier:'',
            loading:false,
            IsUnitAudit: false,
            officeId: null,
            Auditunit: null,
            //部门列表树结构
            dept: [],
            deptId:sessionStorage.getItem('deptId'),
            rules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                cloudSupplier:[
                    { required: true,validator: validator, trigger: 'change' },
                ]
            },
            applicationSystem: null,
            IpType: null,
            PortManage: null,
            port: null,
            portType: null,
            remarks: null,
            columns: [
                {
                    title: "应用系统",
                    slot: "applicationSystem",
                },
                {
                    title: "IP类型",
                    slot: "IpType",
                },
                {
                    title: "端口管理",
                    slot: "PortManage",
                },
                {
                    title: "端口",
                    slot: "port",
                },
                {
                    title: "端口类型",
                    slot: "portType",
                },
                {
                    title: "备注",
                    slot: "remarks",
                },
                {
                    title: "操作",
                    slot: "action",
                },
            ],
            data: [],
            editIndex: -1, // 当前聚焦的输入框的行数
            editapplicationSystem:'',
            editIpType:'',
            editPortManage:'',
            editport:'',
            editportType:'',
            editremarks:'',
            //上云系统列表
            xtList: [],
            // Ip类型数据
            IpTypeList:[
                {
                    id:'BGP',
                    name:'BGP'
                },
                {
                    id:'普通互联网',
                    name:'普通互联网'
                },
                {
                    id:'政务外网',
                    name:'政务外网'
                },
                {
                    id:'其他',
                    name:'其他'
                }
            ],
            // Ip类型数据
            TypeList:[
                {
                    id:'开放',
                    name:'开放'
                },
                {
                    id:'关闭',
                    name:'关闭'
                },
                {
                    id:'映射',
                    name:'映射'
                }
            ],
            // Ip类型数据
            portTypeList:[
                {
                    id:'TCP',
                    name:'TCP'
                },
                {
                    id:'UDP',
                    name:'UDP'
                },
                {
                    id:'TCP/UDP',
                    name:'TCP/UDP'
                }
            ]
        };
    },
    created() {
      // 获取云服务商列表
      logicList().then((res) => {
          this.logicListALL = res.rows;
      });
        this.getListDept();
    },
    methods: {
        demandUnitChange(e){
            if (e.length) {
                this.form.demand_unit = e[e.length - 1];
            }
        },
        auditUnitChange(e){
            if (e.length) {
                this.form.audit_unit = e[e.length - 1];
            }
        },
        UnitAuditChange(e) {
            if(e == 'true'){
                this.IsUnitAudit = true
                this.form.audit_unit = Number(this.deptId)
            }else{
                this.IsUnitAudit = false
                this.form.audit_unit = null
            }
        },
        //数据列表
        getListDept() {
            treeselect({}).then((response) => {
                this.dept = response.data;
                this.form.demand_unit = Number(this.deptId)
            });

        },
        getAllcloudUpList(e){
          this.data=[]
          this.logicListALL.forEach(item=>{
            if(e==item.roleKey){
              AllcloudUpList({supplierCode:item.cloudSupplier}).then(response => {
                  this.xtList = response.rows;
              })
            }
          })

        },
        add() {
            let addObj = JSON.parse(JSON.stringify({
                applicationSystem: '',
                IpType: '',
                PortManage: '开放',
                port: '',
                portType: 'TCP',
                remarks:''
            }))
            this.data.push(addObj);
        },
        remove(index) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.data.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 返回上级
        ReturnSuperior(){
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
            this.$destroy(this.$options.name)
            this.$router.go(-1)
        },
        sumit(){
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.form.ipList = this.data
                    var form = JSON.parse(JSON.stringify(this.form))
                    let obj = {
                        formData: form,
                        variables:{
                            cloudSupplier: this.cloudSupplier,
							deptId: sessionStorage.getItem("deptId"),//当前登录人部门
							deptScope: "UP_CASCADE",//部门范围，向上级联
                        },
                        formDefKey:'ipResourceManagement',
                        title:this.form.title,
                    }
                    this.loading = true
                    definition(obj).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            })
                            this.form = {}
                            this.form.demand_unit = Number(this.deptId)
                            this.form.unit_audit = 'false'
                            this.form.audit_unit = null
                            this.loading = false
                            this.ReturnSuperior()
                        }
                    }).catch(err=>{
                        this.loading = false
                    })
                } else {
                    return false;
                }
            });
        }
    },
};
</script>
<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle{
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248,248,249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>
